<script setup>
import { useUserStore } from '@/store/index.js'

const baseTitle = import.meta.env.VITE_TITLE
const userStore = useUserStore()

const recentlyReleased = ref([])
</script>

<template>
  <div class="flex flex-1">
    <div class="max-w-720 flex-1">
      <AppCard bordered class="h-110 flex items-center border-rd-5">
        <div class="f-c-c">
          <el-avatar class="mx-18" :src="userStore.avatar" size="large" />
        </div>
        <div class="h-full flex-col flex-1 justify-around py-18">
          <div class="line-clamp-1">
            {{ userStore.nickName }}
          </div>
          <div class="line-clamp-1 font-size-14 us">
            <span class="mr-6">1</span>
            <span class="op-text">粉丝</span>
            <el-divider direction="vertical" />
            <span class="mr-6">5</span>
            <span class="op-text">关注</span>
            <el-divider direction="vertical" />
            <span class="op-text"> 在的{{ baseTitle }}创作的</span>
            <span class="px-4">0</span>
            <span class="op-text">天</span>
          </div>
        </div>
      </AppCard>
      <el-card class="mt-10 card-border" shadow="never">
        <template #header>
          <span>近期发布</span>
        </template>
        <div class="min-h-300">
          <el-empty
            v-if="recentlyReleased.length === 0"
            description="这里什么也没有"
            class="us"
          >
            <OpenTag :to="{ name: 'Editor' }">
              <el-button type="primary">
                开始创作
              </el-button>
            </OpenTag>
          </el-empty>
        </div>
      </el-card>
    </div>
    <!--    <div -->
    <!--      class="sticky top-12 ml-20 h-fit max-w-260 flex-1 border-rd-5 bg-gray mobile-hidden" -->
    <!--    > -->
    <!--      11 -->
    <!--    </div> -->
  </div>
</template>

<style scoped>
@media (max-width: 768px) {
  .mobile-hidden {
    display: none;
  }
}
</style>
